<template>
  <div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="tabchange">
      <el-tab-pane label="基本信息" name="first">
        <information v-if="activeName == 'first'" ref="inFormRef" :echo="props.params.contractId" />
      </el-tab-pane>
      <el-tab-pane label="业务信息" name="second" >
        <business v-if="activeName == 'second'" ref="businessRef" :echo="props.params.contractId"/>
      </el-tab-pane>
      <el-tab-pane label="财务信息" name="third" 
        >Role</el-tab-pane
      >
    </el-tabs>
  </div>
</template>

<script setup>
import information from "./components/information";
import business from "./components/business";

const { proxy } = getCurrentInstance();

const activeName = ref("first");
const inFormRef = ref(null)
const businessRef = ref(null)

const props = defineProps({
  params: {
    type: Object,
  },
});

function getInfo() {
    nextTick(() => {
        inFormRef.value.echo()
    })
}

function tabchange() {
    nextTick(() => {
    if (activeName.value == "first") {
      inFormRef.value.echo();
    } else if (activeName.value == "second") {
      businessRef.value.getList(1);
    }
  });
}

getInfo()
</script>
